<!--
 * @Description: 
 * @Author: william
 * @Date: 2025-07-07 20:03:36
 * @LastEditors: william
 * @LastEditTime: 2025-09-23 10:54:59
-->
<template>
  <CustomModal
    ref="refCustomModal"
    title="绑定炒菜机"
    v-model="visible"
    :showCancelButton="false"
    confirmText="确定"
    @confirm="modelConfirm"
  >
    <up-toast ref="uToastRef" />
    <scroll-view
      class="scroll-content"
      scroll-y
      enable-flex
      :style="{
        'max-height': `calc(${refCustomModal.contentMaxHeight} - 30rpx - 24rpx - 28rpx - 74rpx - 30rpx)`
      }"
    >
      <view class="nw-table nw-table2">
        <view class="tr">
          <view class="th" style="width: 72rpx; flex: initial">勾选绑定</view>
          <view class="th">SN</view>
          <view class="th">Brand</view>
          <view class="th">Model</view>
          <view class="th">Version</view>
          <view class="th" style="width: 92rpx; flex: initial">Nickname</view>
        </view>
        <view class="tbody">
          <view class="tr" v-for="row in tableList" :key="row">
            <view class="td" style="width: 72rpx; flex: initial">
              <up-radio-group class="nw-radio-group" v-model="radio">
                <nw-Radio v-model="radio" :name="row.sn"></nw-Radio>
              </up-radio-group>
            </view>
            <view class="td">{{ row.sn }}</view>
            <view class="td">{{ row.brand }}</view>
            <view class="td">{{ row.model }}</view>
            <view class="td">{{ row.masterVersion }}</view>
            <view class="td" style="width: 92rpx; flex: initial">
              {{ row.name }}
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </CustomModal>
</template>

<script setup>
defineOptions({
  name: 'StirFryDeviceBind',
  inheritAttrs: false
})

const props = defineProps({
  deviceSn: {
    type: [String, Number],
    default: ''
  }
})
const visible = defineModel({
  type: Boolean,
  default: false
})
const emit = defineEmits(['add'])

const { allDeviceList, bindDeviceList } = storeToRefs(useDeviceStore())
const refCustomModal = ref({})
const uToastRef = ref(null)
const tableList = ref([])
const radio = ref('')

onMounted(_ => {
  getDataList()
})

const getDataList = _ => {
  // 数据清洗（去重标识 + 格式化）
  const signs = bindDeviceList.value.map(item => item.sn)
  tableList.value = allDeviceList.value.reduce((prev, cur, index, arr) => {
    if (
      cur.type === g_i.device.DeviceModel.CookingMachine &&
      !signs.includes(cur.sn)
    ) {
      prev.push(g_i.apiDataFormat(cur, g_i.device.deviceInfo))
    }
    return prev
  }, [])
  console.log('tableList.value', tableList.value)
}

const modelConfirm = _ => {
  if (!radio.value) {
    uToastRef.value.show({
      type: 'error',
      message: '请选择设备'
    })
  } else {
    bindDeviceList.value.unshift({
      ...tableList.value.find(item => item.sn === radio.value),
      appId: g_utils.getAppId(),
      bind: 1
    })
    visible.value = false
    emit('add')
  }
}
</script>

<style lang="scss" scoped>
.scroll-content {
  margin-top: 28rpx;
}
</style>
